<template>
  <a-button
    type="text"
    style="padding: 5px 12px; height: auto; text-align: left"
    @click="onOpen"
    :loading="openLoading"
    block
  >
    作废
  </a-button>
  <a-modal
    v-model:open="open"
    :title="`作废文件${data.dataType === 'folder' ? '(夹)' : ''}`"
    @ok="confirm"
    :confirmLoading="loading"
  >
    <div
      class="modal-box before-border after-border"
      style="padding-bottom: 55px"
    >
      <p>
        <info-circle-filled
          style="color: #faad14; margin-right: 9px"
        />确定作废:&nbsp; &nbsp;{{ props?.data?.dataName }} ?
      </p>
      <!-- <div style="color: #ff4d4f" v-if="props?.data?.dataType === 'folder'">
        文件夹内包含{{ count }}个文件
      </div> -->
    </div>
  </a-modal>
</template>
<script setup>
import { ref } from 'vue'
import { InfoCircleFilled } from '@ant-design/icons-vue'
import { deleteFile, getChildFileCount } from '@/api/db.js'
import { useDataSourceManager } from './provide-context.js'
import { useDbType } from '@/views/db-management/provide-context.js'
/**
 * 外部参数
 */
let props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})
/**
 * 事件定义
 */
let emit = defineEmits(['operated'])
/**
 * 全局
 */
let { update } = useDataSourceManager()
/**
 * 操作
 */
let loading = ref(false)
let open = ref(false)
let dbType = useDbType()
async function confirm() {
  loading.value = true
  try {
    await deleteFile(
      {
        id: props?.data?.dataId,
      },
      dbType,
    )
    open.value = false
    emit('operated')
    await update()
  } catch (e) {
    console.log(e)
  }
  loading.value = false
}
/**
 * 打开气泡
 */
let openLoading = ref(false)
let count = ref(0)
async function onOpen() {
  open.value = true
  // openLoading.value = true
  // try {
  //   if (props?.data?.dataType === 'folder') {
  //     let result = await getChildFileCount({
  //       dataId: props?.data?.dataId,
  //     })
  //     count.value = result?.data?.fileCount || 0
  //   }
  //   open.value = true
  // } catch (e) {}
  // openLoading.value = false
}
</script>
<style lang="less" scoped></style>
